
import * as React from 'react';
import {render} from '../../../renderers/factory';
import * as moment from 'moment';
import './style.scss';
import '../../../node_modules/echarts/map/js/china'
 export default class VolunteerIncrease  extends React.Component{
    constructor(props) {
        super(props);
        this.state = {

        };
    }
     componentDidMount() {

     }
    render() {

        return (
            <div>
                {
                    render('page', {
                        type: 'page',
                        title: '用户增长分析',
                        bodyClassName: '',
                        body: {
                            type: "nav",
                            stacked: false,
                            links: [
                                {
                                    label: "用户增长",
                                    to: "/statistic/volunteer/increase"
                                },
                                {
                                    label: "用户属性",
                                    to: "/statistic/volunteer/userinfo"
                                }
                            ]
                        }
                    }, this.props)
                }
                <div className="wrapper-md" style={{ backgroundColor: '#fff' }}>
                    <legend>性别分布</legend>
                    <div className="row">
                        {
                            render('page', {
                                type: 'page',
                                title: '',
                                bodyClassName: '',
                                body: [
                                    {
                                        type: "chart",
                                        api: "/api/statistics/volunteer/gender?_=${_}",
                                        interval: false,
                                        name: 'chart2',
                                        className: "gender-chart"
                                    }
                                ]

                            }, this.props)
                        }
                    </div>
                </div>
                <div className="wrapper-md" style={{ backgroundColor: '#fff' }}>
                    <legend>年龄分布</legend>
                    <div className="row">
                        {
                            render('page', {
                                type: 'page',
                                title: '',
                                bodyClassName: '',
                                body: [
                                    {
                                        type: "chart",
                                        api: "/api/statistics/volunteer/age?_=${_}",
                                        interval: false,
                                        name: 'chart3',
                                        className: "age-chart"
                                    }
                                ]

                            }, this.props)
                        }
                    </div>
                </div>

                <div className="wrapper-md" style={{ backgroundColor: '#fff' }}>
                    <legend>省份分布</legend>
                    <div className="row">
                        {
                            render('page', {
                                type: 'page',
                                title: '',
                                bodyClassName: '',
                                body: [
                                    {
                                        type: "chart",
                                        api: "/api/statistics/volunteer/area?_=${_}",
                                        interval: false,
                                        name: 'chart4',
                                        className: "area-chart"
                                    }
                                ]

                            }, this.props)
                        }
                    </div>
                </div>
                <div className="wrapper-md" style={{ backgroundColor: '#fff' }}>
                    <legend>城市分布</legend>

                    <div className="row">
                        {
                            render('page', {
                                type: 'page',
                                title: '',
                                className: 'page-province',
                                bodyClassName: '',
                                body: [
                                    // {
                                    //     type: "form",
                                    //     name: "form",
                                    //     target: "chart5",
                                    //     // reload: "chart1",
                                    //     // className: "chart-form",
                                    //     wrapWithPanel: false,
                                    //     submitText: false,
                                    //     submitOnChange: true,
                                    //     title: '',
                                    //     mode: "inline",
                                    //     controls:
                                    //         [
                                    //             {
                                    //                 type: "select",
                                    //                 name: "city_name",
                                    //                 label: "",
                                    //                 // placeholder: "机构名称",
                                    //                 value: '全国',
                                    //                 clearable: true,
                                    //                 autoComplete: '/api/statistics/province_info?_=${_}',
                                    //             },
                                    //         ]
                                    // },
                                    {
                                        type: "crud",
                                        api: "get:/api/statistics/volunteer/city",
                                        columnsTogglable: false,
                                        showHeader: false,
                                        filter: {
                                            title: "",
                                            panelClassName: 'm-b-none bg-gd no-border',
                                            bodyClassName: 'wrapper-sm',
                                            submitText: "",
                                            submitOnChange: true,
                                            autoFocus: false,
                                            controls: [
                                                {
                                                    type: "select",
                                                    name: "city_name",
                                                    label: "",
                                                    // placeholder: "机构名称",
                                                    // value: '全国',
                                                    clearable: true,
                                                    autoComplete: '/api/statistics/province_info?_=${_}',
                                                }
                                            ]
                                        },
                                        columns: [
                                            {
                                                name: "city",
                                                label: "城市",
                                                width: 100
                                            },

                                            {
                                                name: "value",
                                                label: "用户数",
                                                sortable: true,
                                                width: 100

                                            },
                                            {
                                                type: "progress",
                                                label: '',
                                                width: 220,
                                                name: "progress"
                                            }
                                        ]

                                    }
                                ],
                            }, this.props)
                        }
                    </div>
                </div>
            </div>
        )
    }
}
